<template>
  <div class="index">
    <head-text titleText="支付流水(跟踪客户扫码缴费情况)"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
      </div>
      <div class="table-title">
        <span></span>
        <h5>支付流水列表</h5>
      </div>
      <custom-table
        :tableData="tableData"
        :tableBtn="tableBtn"
        :tableListData="tableListData"
        :currentData="currentData"
        @onPageChange="onPageChange"
        @onSizeChange="onSizeChange"
        @handleEdit="handleEdit"
        v-if="pageReset"
      ></custom-table>
    </div>
  </div>
</template>
<script>
import customTable from "@c/table";
import Search from "@c/search";
import headText from "@c/headText";
import {
  getCustomerListApi,
  getOrderFlowApi,
  getOrderFlowUpdateApi
} from "@s/api";
import { PAYTYPE } from "@u/wordbook";
import timeFormat from "@u/timeFormat";
export default {
  name: "index",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      pageReset: true,
      searchItem: [],
      searchData: {
        customerId: "",
        applicationNumber: "",
        orderId: "",
        payStartTime: "",
        payEndTime: ""
      },
      tableData: [],
      customerSelect: [],
      currentData: {}
    };
  },
  components: {
    headText,
    Search,
    customTable
  },
  created() {
    // form搜索
    this.searchItem = [
      {
        type: "select",
        label: "客户名称：",
        prop: "customerId",
        placeholder: "请选择",
        selectList: this.customerSelect
      },
      {
        type: "input",
        label: "专利申请号",
        prop: "applicationNumber",
        placeholder: "请输入专利申请号"
      },
      {
        type: "input",
        label: "订单号",
        prop: "orderId",
        placeholder: "请输入专利申请号"
      }
    ];
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "customerName", width: "", label: "客户名称" },
      { prop: "applicationNumber", width: "", label: "专利申请号" },
      { prop: "title", width: "", label: "专利名称" },
      {
        prop: "orderAmount",
        width: "",
        label: "缴费金额(元)",
        type: "wordbook",
        wordbookList: this.getFeeAmount
      },
      { prop: "feeType", width: "150", label: "缴费类型" },
      { prop: "orderId", width: "150", label: "订单号" },
      {
        prop: "status",
        width: "80",
        label: "状态",
        type: "wordbook",
        wordbookList: this.getStatus
      },
      { prop: "createTime", width: "150", label: "生成时间" },
      { label: "操作", type: "btn", fixed: "right" }
    ];
    // 按钮
    this.tableBtn = [
      {
        name: "更新",
        btnType: "primary",
        handleFn: "handleEdit"
      }
    ];
  },
  mounted() {
    this.getCustomerSelect();
    this.getList();
  },
  methods: {
    // 缴费金额
    getFeeAmount(val) {
      return timeFormat.formatFloat(val / 100, 2);
    },
    // 缴费金额
    getStatus(val) {
      if (val == "1") {
        return "已扫码支付";
      } else {
        return "未扫码";
      }
    },
    // 过滤
    payType(val) {
      return PAYTYPE[val];
    },
    // 编辑
    handleEdit(row) {
      // eslint-disable-next-line no-debugger
      debugger;
      let json = {
        orderId: row.orderId
      };
      getOrderFlowUpdateApi(json).then(() => {
        this.getList();
        this.$message({
          type: "success",
          message: "更新成功！"
        });
      });
    },
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    //获取列表
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.page = this.nowPage;
      json.limit = this.limit;
      getOrderFlowApi(json).then(res => {
        this.tableData = res.list;
        this.currentData.total = res.total;
      });
    },
    // 获取代理商列表
    getCustomerSelect() {
      getCustomerListApi().then(res => {
        let newCustomerList = [];
        res.forEach(item => {
          var newItem = {
            id: item.id,
            value: item.customerName
          };
          newCustomerList.push(newItem);
        });
        this.customerSelect = newCustomerList;
        this.searchItem.forEach(item => {
          if (item.prop == "customerId") {
            item.selectList = this.customerSelect;
          }
        });
      });
    }
  }
};
</script>
<style scoped lang="scss"></style>
